<template>
  <div style="margin-bottom: 20px">
    <el-button @click="toggleMode">切换{{ isView ? '编辑' : '查看' }}模式</el-button>
    <el-button @click="getContent">获取内容</el-button>
  </div>

  <zl-editor ref="editorRef" v-model="value" :is-view="isView" style="border: 1px solid #ddd; border-radius: 4px" />

  <div style="margin-top: 10px">
    <el-button @click="insertTextVar">插入文本变量</el-button>
    <el-button @click="insertTableVar">插入表格变量</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ZlEditor } from '@zl-crud/components'
import '@zl-crud/components/editor/style/index'
import { ElMessage } from 'element-plus'

const value = ref('')
const isView = ref(false)
const editorRef = ref()

const toggleMode = () => {
  isView.value = !isView.value
}

const getContent = () => {
  const content = editorRef.value.getData()
  ElMessage.info('已获取内容，打开控制台查看')
  console.log('编辑器内容:', content)
}

const insertTextVar = () => {
  editorRef.value.insertVar({ type: 'text', label: '用户名', value: '${userName}' })
}

const insertTableVar = () => {
  editorRef.value.insertTable({
    type: 'table',
    label: '采购物料明细',
    value: 'details',
    columns: [
      { label: '名称', value: 'name' },
      { label: '规格', value: 'spec' },
      { label: '型号', value: 'model' },
      { label: '制造商', value: 'manufacturer' },
    ],
  })
}
</script>
